<template>
    销售列表
    <el-table :data="sellList" style="width: 100%">
        <el-table-column prop="id" key="sell" label="编号" width="180" />
        <el-table-column prop="custName" label="客户" width="180" />
        <el-table-column prop="channelId" label="销售渠道" width="180">
            <template #default="scope">
                {{ getChannelName(scope.row.channelId) }}
            </template>
        </el-table-column>
        <el-table-column prop="money" label="销售金额" width="180" />
        <el-table-column prop="nowStep" label="销售阶段" width="180" />
        <el-table-column prop="empId" label="业务员" width="180" />
        <el-table-column fixed="right" label="操作">

            <template #default="scope">
                <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">
                    修改
                </el-button>

                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination layout="prev, pager, next" :total="total" @current-change="getSellList"
        v-model:current-page="currentPage" />

    <el-dialog v-model="dialogVisible" title="Tips" width="500">
        <el-form :model="sellForm" label-width="auto" style="max-width: 600px">
            <el-form-item label="客户名称">
                <el-select v-model="sellForm.custId" class="m-2" placeholder="。。。">
                    <el-option :label="cust.name" :value="cust.id" v-for="cust in custList" />
                </el-select>
            </el-form-item>
            <el-form-item label="销售渠道">
                <el-select v-model="sellForm.channelId" placeholder="please select your type">
                    <el-option v-for="channel in channelList" :label="channel.label" :value="channel.id" />
                    <!-- <el-option label="网络推广" value="1" />
                    <el-option label="老客户简介" value="2" />
                    <el-option label="陌拜" value="3" />
                    <el-option label="测试" value="4" />
                    <el-option label="测试" value="5" /> -->
                </el-select>
            </el-form-item>
            <el-form-item label="销售金额">
                <el-input v-model="sellForm.money" />
            </el-form-item>
            <el-form-item label="开发阶段">
                <el-select v-model="sellForm.nowStep" placeholder="请选择...">
                    <el-option label="解除" value="T1" />
                    <el-option label="测试1" value="T2" />
                    <el-option label="测试2" value="T3" />
                    <el-option label="测试3" value="T4" />
                    <el-option label="测试4" value="T5" />
                </el-select>
            </el-form-item>
            <el-form-item label="Grade">
                <el-input v-model.number="sellForm.empId" type="text" autocomplete="off" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">Cancel</el-button>
                <el-button type="primary" @click="updateSell">
                    Confirm
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue';
import axios from 'axios'

const currentPage = ref(1)
const total = ref()
const sellList = ref([])

const custList = ref([])
const channelList = ref([
    { id: 0, label: "自媒体" }, 
    { id: 1, label: "网络推广" }, 
    { id: 2, label: "老客户简介" }, 
    { id: 3, label: "陌拜" }, 
    { id: 4, label: "测试" }, 
    { id: 5, label: "测试" }
])

function getSellList(current) {
    console.log(current)
    axios.get("http://localhost:8081/listSell?pageNum=" + current).then((resp) => {
        console.log(resp.data)
        sellList.value = resp.data.rows
        total.value = resp.data.total
        // getAllCust()
    }).catch((error) => {
        console.log(error)
    })
}


function getAllCust() {
    axios.get("http://localhost:8081/listAllCust").then((resp) => {
        if (resp.data.code == 200) {
            custList.value = resp.data.data
        } else {

        }
    }).catch((error) => {
        console.log(error)
    })
}

function getChannelName(channelId) {
    switch (channelId) {
        case 0:
            return "自媒体"
        case 1:
            return "网络推广"
        case 2:
            return "巴拉巴拉"
        default:
            return channelId
    }
}
const dialogVisible = ref(false)
const sellForm = reactive({
    id: 0,
    custId: 0,
    channelId: 0,
    money: 0,
    nowStep: '',
    empId: 0
})


function handleEdit(index, row) {
    console.log(index, row)
    getAllCust()
    sellForm.id = row.id
    sellForm.custId = row.custId
    sellForm.channelId = row.channelId
    sellForm.money = row.money
    sellForm.nowStep = row.nowStep
    sellForm.empId = row.empId

    dialogVisible.value = true
}

function updateSell() {
    console.log(sellForm)
    axios.post("http://localhost:8081/updateSell", sellForm).then((resp) => {
        if (resp.data.code == 200) {
            ElMessage({ message: resp.data.msg, type: 'success' })
            // console.log("Page: " + currentPage.value)
            getSellList(currentPage.value)
            dialogVisible.value = false
        } else {
            ElMessage.error(resp.data.msg)
        }
    }).catch((error) => {
        console.log(error)
    })
}

onMounted(() => {
    getSellList(1)
})

</script>

<style scoped></style>